@charset "utf-8";

@function r($px) {
    @return($px/40) *1rem;
}

@function px($px) {
    @return($px/2) * 1px;
}
.mid{
    vertical-align: middle;
}
.txhz{
    display: -webkit-flex;
    display: flex;
}
#web {
    width: r(750);
    height: 100%;
    position: relative;
    padding-left: r(23);
    padding-right: r(23);
    box-sizing: border-box;
}
header{
    width: 100%;
    position: relative;
    padding-top: 24px;
    z-index: 2;
    background: white;
    .back{
        display: inline-block;
        width: 59px;
        height: 26px;
        border: 3px solid #ff9344;
        border-radius: 25px;
        text-align: center;
        vertical-align: middle;
        font-size: 21px;
    }
    .title{
        font-size: 13px;
        text-align: center;
        margin-top: 8px;
    }
   
    .selectBar {
        width: 79px;
        height: 27px;
        border: 1px solid #FF9344;
        margin-top: 1px;
        select {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            vertical-align: top;
            //去除默认样式
            appearance: none;
            -webkit-appearance: none;
            background-image: url(../img/dsjx_09.jpg);
            background-repeat: no-repeat;
            background-size: 15px 8px;
            background-position: right 6px center;
        }
    }
}
footer {
    width: r(750);
    height: px(136);
    position: absolute;
    left: 0;
    bottom: 0;
    li {
        width: 25%;
        text-align: center;
        .iconfont{
           font-size: r(72);
           color: white;
           -webkit-text-stroke: 1px #FF9344;

        }
        .wz26{
            font-size: r(26);
            color: black;
        }
    }
    
        .fenlei{
            .iconfont{
            color: #ff9344;
            }
        }     
}
.session{ 
    position: absolute;
    left: r(23);
    right: r(23);
    top: 75px;
    bottom: px(136);
    
    //纵向滚动
    overflow-y: scroll;
    //弹性滚动
    -webkit-overflow-scrolling: touch;
    .session1{
        justify-content: space-between;
        align-items: flex-start;
        margin-top: r(17);
        img{
            width: r(148);
        }
        p{
            text-align: center;
            font-size: r(26);
        }
    }
    .session2{
        text-align: center;
        margin-top: r(16);
    }
    .session3{
        margin-top: r(19);
        .fl{
            img{
                width: r(56);
            }
            span{
                font-size: r(30);
            }
        }
        .fr{
            img{
                width: r(25);
            }
            span{
                font-size: r(24);
            }
        }
    }
    .session4{
        justify-content: space-between;
        align-items: flex-start;
        margin-top: r(36);
        img{
            width: r(133);
        }
    }
    .session5{
        margin-top: r(52);
        .fl{
            img{
                width: r(47);
            }
            span{
                font-size: r(30);
            }
        }
        .fr{
            img{
                width: r(25);
            }
            span{
                font-size: r(24);
            }
        }
    }
    .session6{
        justify-content: space-between;
        align-items: flex-start;
        margin-top: r(43);
        img{
            width: r(133);
        }
    }
    .session7{
        margin-top: r(69);
        .fl{
            img{
                width: r(53);
            }
            span{
                font-size: r(30);
            }
        }
        .fr{
            img{
                width: r(25);
            }
            span{
                font-size: r(24);
            }
        }
    }
    .session8{
        justify-content: space-between;
        align-items: flex-start;
        margin-top: r(48);
        margin-bottom: r(67);
        img{
            width: r(133);
        }
    }
}